<template>
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="车牌号" prop="licensePlate">
        <el-input v-model="form.licensePlate" placeholder="请输入车牌号" />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-select v-model="form.brandId" placeholder="请选择品牌">
          <el-option
            v-for="vehicle in delVehicles"
            :key="vehicle.dictCode"
            :label="vehicle.dictLabel"
            :value="vehicle.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="购车年份" prop="purchaseYear">
        <el-date-picker
          clearable
          v-model="form.purchaseYear"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择购车年份"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="车辆类型" prop="typeId">
        <el-select v-model="form.typeId" placeholder="请选择类型">
          <el-option
            v-for="vehicle in delVehiclesType"
            :key="vehicle.dictCode"
            :label="vehicle.dictLabel"
            :value="vehicle.dictCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="座位数" prop="seatCount">
        <el-input v-model="form.seatCount" placeholder="请输入座位数" />
      </el-form-item>
      <el-form-item label="驾驶员" prop="driver">
        <el-input v-model="form.driver" placeholder="请输入驾驶员姓名" />
      </el-form-item>
      <el-form-item label="车辆图片" prop="image">
        <el-upload class="upload-demo" :action="'#'" :auto-upload="false" :show-file-list="true" :on-change="handleFileChange"
                   :file-list="fileList" :on-remove="handleRemove" :limit="1" accept="image/jpeg,image/png"
                   list-type="picture-card">
          <!-- 只允许一张图 -->
          <i class="el-icon-plus" v-if="fileList.length === 0"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddVehicleDialog",
  props: {
    open: {
      type: Boolean,
      default: false
    },
    delVehicles: {
      type: Array,
      default: () => []
    },
    delVehiclesType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: "添加车辆",
      form: {
        licensePlate: null,
        brandId: null,
        purchaseYear: null,
        typeId: null,
        image: null,
        seatCount: null,
        driver: null // 添加驾驶员字段
      },
      fileList: [],           // 显示上传列表
      imageFile: null,        // 真正的文件缓存
      rules: {
        licensePlate: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        organizationId: [
          { required: true, message: "所属单位ID不能为空", trigger: "blur" }
        ],
        driver: [
          { required: true, message: "驾驶员姓名不能为空", trigger: "blur" } // 添加驾驶员验证规则
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now(); // 禁用当前日期及之前的日期
        }
      }
    };
  },
  methods: {
    // 选中图片触发
    handleFileChange(file, fileList) {
      this.imageFile = file.raw;
      this.fileList = fileList;
    },

    // 删除图片
    handleRemove(file, fileList) {
      this.imageFile = null;
      this.fileList = fileList;
    },
    // 取消按钮
    cancel() {
      this.$emit("update:open", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        licensePlate: null,
        brandId: null,
        purchaseYear: null,
        typeId: null,
        image: null,
        seatCount: null,
        driver: null // 重置驾驶员字段
      };
      this.resetForm("form");
      this.fileList = [];
      this.imageFile = null;
      this.$refs["form"].resetFields();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const VehicleBrand = this.delVehicles.find(delVehicles => delVehicles.dictCode === this.form.brandId);
          if (VehicleBrand) {
            this.form.brand = VehicleBrand.dictLabel;
          } else {
            this.$modal.msgError("请选择正确的车辆品牌");
            return;
          }
          const VehicleType = this.delVehiclesType.find(delVehiclesType => delVehiclesType.dictCode === this.form.typeId);
          if (VehicleType) {
            this.form.type = VehicleType.dictLabel;
          } else {
            this.$modal.msgError("请选择车辆类型");
            return;
          }
          const formData = new FormData();
          for (let key in this.form) {
            if (this.form[key] !== null && this.form[key] !== undefined) {
              formData.append(key, this.form[key]);
            }
          }
          // 一定要改成和后端 AddRecordsForm 中字段名一致
          if (this.imageFile) {
            formData.append("file", this.imageFile); // 这里的 "file" 是后端期待的字段名
          }
          for (let [key, value] of formData.entries()) {
            console.log(`${key}:`, value);
          }
          this.$emit("submit", formData);
          this.$emit("update:open", false);
          this.reset();
        }
      });
    }
  }
};
</script>
